<!--
 * @Author: GKN
 * @Date: 2023-07-25 09:53:36
 * @LastEditTime: 2024-01-31 10:36:51
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\politics\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="mainPadding p-t">
    <div class="max-w">
    <div class="flex flex-j-s">
      <div class="font-Breadcrumbs"></div>
      <el-breadcrumb separator="|">
        <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i" v-show="item.isNav==1" @click="goList(item,i)" class="cursor-p">{{ item.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="MarT withFull">
      <el-row>
        <el-col :span="24">
          <Card1 :title="list_children?list_children[0].name:''" :more="true" @moreClick="more(list_children[0].id,list_children?list_children[0].name:'')">
            <template v-slot:main1>
              <el-row :gutter="20" class="p-b">
                <el-col :span="16">
                  <!-- <banner :list="list1_s" class="shadow-3" style="height:430px;"></banner> -->
                  <div style="height:430px;" class="po-re" @click="goInfo(list1.length>0?list1[0]:'',list_children?list_children[0].name:'')">
                    <imgView :src="list1.length>0?list1[0].thumb:''"></imgView>
                    <div class="po-ab0 xf-font" style="width: 100%;text-align: left;">
                      {{list1.length>0?list1[0].name:'' }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="height:430px;">
                  <div v-for="(item,i) in list1.slice(1, list1.length)" :key="i" @click="goInfo(item,list_children?list_children[0].name:'')"  style="height:25%;" class="cursor-p">
                    <div class="font-title font-text-al-l omit">{{ item.name }}</div>
                    <div class="font-content font-MTop font-text-al-l omit-2">{{ item.blurb }}</div>
                  </div>
                </el-col>
              </el-row>
            </template>
          </Card1>
        </el-col>
      </el-row>
    </div>
    <div class="MarT withFull">
      <el-row :gutter="20">
        <el-col :span="6"><div class="zt cursor-p">
          <adImgView :src="ad_list1.length>0?ad_list1[0].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>0?ad_list1[0]:'')" />
        </div></el-col>
        <el-col :span="12"><div class="zt cursor-p">
          <adImgView :src="ad_list1.length>1?ad_list1[1].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>1?ad_list1[1]:'')" />
        </div></el-col>
        <el-col :span="6"><div class="zt cursor-p">
          <adImgView :src="ad_list1.length>2?ad_list1[2].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>2?ad_list1[2]:'')" />
        </div></el-col>
      </el-row>
    </div>
    <div class="MarT withFull">
      <el-row :gutter="20" class="heightFull">
        <el-col :span="8" >
          <Card1 :title="list_children?list_children[2].name:''" class="heightFull" :more="true" @moreClick="more(list_children[2].id,list_children?list_children[2].name:'')">
            <template v-slot:main1>
              <div class="hotView" style="height: 700px;">
                <el-empty v-if="hot_list.length == 0" description="暂无内容" />
                <div v-for="(item,i) in hot_list" :key="i" @click="goInfo(item,list_children?list_children[2].name:'')" class="MarB cursor-p">
                    <div v-if="item.thumb" class="po-re">
                      <div class="imgView">
                        <imgView :src="item.thumb" />
                      </div>
                      <div class="po-ab0 xf-font-small omit" style="width: 100%;">{{ item.name }}</div>
                    </div>
                    <div v-if="!item.thumb">
                      <div class="font-title font-text-al-l">{{ item.name }}</div>
                      <div class="font-content font-MTop12 font-text-al-l omit-3">{{ item.blurb }}</div>
                    </div>
                </div>
              </div>
            </template>
          </Card1>
        </el-col>
        <el-col :span="8" class="heightFull">
          <Card1 :title="list_children?list_children[3].name:''" class="heightFull" :more="true" @moreClick="more(list_children[3].id,list_children?list_children[3].name:'')">
            <template v-slot:main1>
              <div style="height: 700px;">
                <el-empty v-if="zx_list.length == 0" description="暂无内容" />
                <div class="flex flex-j-s flex-w">
                  <el-row :gutter="20">
                      <el-col v-for="(item,i) in zx_list" :key="i" @click="goInfo(item,list_children?list_children[3].name:'')" class="MarB withFull cursor-p" :span="item.thumb?12:24" >
                        <div class="font-content font-MTop12 font-text-al-l omit withFull" v-if="!item.thumb">{{ item.name }}</div>
                        <div v-if="item.thumb" class="zx-view">
                          <div class="img">
                            <imgView :src="item.thumb" />
                          </div>
                          <div class="font-title font-text-al-l MarT14 omit-2">{{ item.name }}</div>
                        </div>
                      </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </Card1>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <div>
            <Card1 :title="list_children?list_children[7].name:''" :more="true" @moreClick="more(list_children[7].id,list_children?list_children[7].name:'')">
              <template v-slot:main1>
                <div class="rm-view" style="height: 361px;overflow-y: auto;">
                  <el-empty v-if="rm_list.length == 0" description="暂无内容" />
                  <div v-for="(item,i) in rm_list" :key="i" @click="goInfo(item,list_children?list_children[7].name:'')" class="cursor-p">
                    <div class="img po-re" v-if="item.thumb">
                      <imgView :src="item.thumb" />
                      <div class="po-ab0 xf-font-small omit" style="width: 100%;">{{ item.name }}</div>
                    </div>
                    <div class="MarT14" v-if="!item.thumb">
                      <div class="font-title font-MTop12 font-text-al-l omit">{{ item.name }}</div>
                    </div>
                  </div>
                  
                </div>
              </template>
            </Card1>
          </div>
          <div style="margin-top:20px;">
            <Card1 :title="list_children?list_children[4].name:''" :more="true" @moreClick="more(list_children[4].id,list_children?list_children[4].name:'')">
              <template v-slot:main1>
                <div class="df-view" style="height: 240px;overflow-y: auto;">
                  <myEmpty v-if="!df_list" :size="50" />
                  <div v-for="(item,i) in df_list" :key="i" @click="goInfo(item,list_children?list_children[4].name:'')" class="cursor-p MarB">
                    <div class="img-view flex withFull flex-j-s" v-if="item.thumb"> 
                      <div class="img">
                        <imgView :src="item.thumb" />
                      </div>
                      <div class="font-title font-text-al-l flex flex-align with50">{{ item.name }}</div>
                    </div>
                    <div class="MarT35" v-if="!item.thumb">
                      <div class="font-content-14 font-MTop12 font-text-al-l omit">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </Card1>
          </div>
          
        </el-col>
      </el-row>
    </div>
    <div class="MarT withFull">
      <el-row :gutter="20" style="height: 100%;">
        <el-col :span="8" style="height: 100%;">
          <Card1 :title="list_children?list_children[5].name:''" :more="true" @moreClick="more(list_children[5].id,list_children?list_children[5].name:'')">
            <template v-slot:main1>
              <div class="df-view" style="height: 280px;">
                <el-empty v-if="fz_list.length == 0" description="暂无内容" />
                <div v-for="(item,i) in fz_list" :key="i" @click="goInfo(item,list_children?list_children[5].name:'')" class="cursor-p">
                  <div class="img-view flex withFull flex-j-s MarB" v-if="item.thumb"> 
                    <div class="img">
                      <imgView :src="item.thumb" />
                    </div>
                    <div class="font-title font-text-al-l flex flex-align with50">{{ item.name }}</div>
                  </div>
                  <div class="MarT35" v-if="!item.thumb">
                    <div class="font-title font-MTop12 font-text-al-l omit">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </template>
          </Card1>
        </el-col>
        <el-col :span="8">
          <Card1 :title="list_children?list_children[6].name:''" :more="true" @moreClick="more(list_children[6].id,list_children?list_children[6].name:'')">
            <template v-slot:main1>
              <div class="df-view" style="height: 280px;">
                <el-empty v-if="lz_list.length == 0" description="暂无内容" />
                <div v-for="(item,i) in lz_list" :key="i" @click="goInfo(item,list_children?list_children[6].name:'')" class="cursor-p">
                  <div class="img-view flex withFull flex-j-s" v-if="item.thumb"> 
                    <div class="img">
                      <img v-if="item.thumb" :src="proxy.$api.prefix_img+item.thumb" alt="" class="ad-img">
                      <el-empty v-if="!item.thumb" :image-size="50" description="暂无图片"  />
                    </div>
                    <div class="font-title font-text-al-l flex flex-align with50">{{ item.name }}</div>
                  </div>
                  <div class="MarT35" v-if="!item.thumb">
                    <div class="font-title font-MTop12 font-text-al-l omit">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </template>
          </Card1>
        </el-col>
        <el-col :span="8">
          <Card1 :title="list_children?list_children[1].name:''" :more="false" background="background:#fefdf0;">
            <template v-slot:main1>
              <div style="height: 315px;">
                <div v-for="(item,i) in tj_list" :key="i" :class="i==0?'first_color MarT0 font-MTop12 cursor-p':'MarT35 font-MTop12 cursor-p'" @click="goInfo(item,list_children?list_children[1].name:'')">
                  <div :class="i==0?'font-text-al-l omit':'font-title font-text-al-l omit'" :style="i==0?'color:#fff;':''">{{ item.name }}</div>
                </div>
              </div>
            </template>
          </Card1>
        </el-col>
      </el-row>
    </div>
    <div class="MarT withFull">
      <div class="gg">
        <adImgView :src="ad_list2.length>0?ad_list2[0].img:''" @click="proxy.$comJs.openUrl(ad_list2.length>0?ad_list2[0]:'')" />
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
  import { ref,reactive, onMounted,getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  import CryptoJS from 'crypto-js';
  import { useRoute, useRouter } from "vue-router";
  const Router = useRouter();
  import Card1 from '../components/card1.vue';
  import banner from '../components/banner.vue';
  
  // 导航下对应模块
  const list_children = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].children
  // 面包屑
  const breadcrumb_list = list_children
  // 子栏目跳转
  const goList=(item,i)=>{
    Router.push({
        path:'/politics/list',
        query:{
          ob:proxy.$comJs.encry({
            title:item.name,
            i:i,
            titleList:list_children
          })
        }
      });

  }
  // -----------------------页面广告------------------------
  const ad_list1 = ref([])
  const ad_list2 = ref([])
  const getAd=(id)=>{
    proxy.$comJs.getAd(id,0,function(res){
      var list1 = [],list2=[]
        res.list.map((item)=>{
          if(item.nid == 21){
            list1.push(item)
          }
          if(item.nid == 144){
            list2.push(item)
          }
        })
        ad_list1.value = list1.length>0?list1:[]
        ad_list2.value = list2.length>0?list2:[]
    })
  }
  getAd(proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id)
  // ----------------------页面广告end------------------------
  
  // 政策
  const list1 = ref([])
  // 热点
  const hot_list = ref([])
  // 资讯
  const zx_list=ref([])
  // 任免
  const rm_list=ref([])
  // 地方
  const df_list=ref([])
  // 法治
  const fz_list=ref([])
  // 廉政
  const lz_list=ref([])
  // 推荐
  const tj_list=ref([])
  // 页面数据获取
  const getPageList=()=>{
      list_children.map((item,i)=>{
        if(i==0){
          proxy.$comJs.getNewList(5,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            list1.value = data.list
          })
        }
        if(i==1){
          proxy.$comJs.getNewList(5,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            tj_list.value = data.list
          })
        }
        if(i==2){
          proxy.$comJs.getNewList(3,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            hot_list.value = data.list
          })
        }
        if(i==3){
          proxy.$comJs.getNewList(8,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            zx_list.value = data.list
          })
        }
        if(i==4){
          proxy.$comJs.getNewList(2,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            df_list.value = data.list
          })
        }
        if(i==5){
          proxy.$comJs.getNewList(5,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            fz_list.value = data.list
          })
        }
        if(i==6){
          proxy.$comJs.getNewList(5,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            lz_list.value = data.list
          })
        }
        if(i==7){
          proxy.$comJs.getNewList(5,item.id,{nextTag:0,prevTag:0},'',(data)=>{
            rm_list.value = data.list
          })
        }
      })
    }
  getPageList()
  const more =(id,title)=>{
    Router.push({
        path:'/animatedly/list',
        query:{
          ob:proxy.$comJs.encry({
            title:title,
            id:id,
            first_title:'政务资讯',
          })
        }
      });
  }
  const goInfo=(item,name)=>{
    const routeUrl = Router.resolve({
        path:'/animatedly/info',
        query:{
            ob:proxy.$comJs.encry({
                title:name,
                id:item.newsId,
                path:'/animatedly/list',
                first_title:'政务资讯',
                first_path:-1
            })
        }
    });
    window.open(routeUrl.href, "_blank");
  }
</script>

<style lang='less' scoped>
  .zt{
    height: 200px;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
  }
  .gg{
    height: 200px;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
  }
  .hotView{
    .imgView{
      background: #ececec;
      height: 206px;
      overflow: hidden;
      border-radius: 6px;
    }
  }
  .zx-view{
    width:100%;
    .img{
      width:100%;
      height: 100px;
      overflow: hidden;
      border-radius: 6px;
      background: #ececec;
    }
  }
  .rm-view{
    .img{
      width:100%;
      height: 208px;
      overflow: hidden;
      border-radius: 6px;
      background: #ececec;
    }
  }
  .df-view{
    .img-view{
      .img{
        width:48%;
        height: 100px;
        overflow: hidden;
        border-radius: 6px;
        background: #ececec;
      }
    }
  }
  .first_color{
    background: #ff7e77;
    padding: 20px;
    .font-content{
      color:#fff;
      font-size: 17px;
      font-weight: bold;
    }
  }
</style>
